<template>
    <div class="home">
        <h2 ref="myH2">过滤器使用:{{ currentTime | formatTime('-') }}</h2>
        <van-button type="primary" @click.native="showInput"
            >我是一个放大镜</van-button
        >
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>1</van-swipe-item>
            <van-swipe-item>2</van-swipe-item>
            <van-swipe-item>3</van-swipe-item>
            <van-swipe-item>4</van-swipe-item>
        </van-swipe>
        请输入要查询的内容:
        <input type="text" ref="myInput" v-show="ifshow" />
        <HelloWorld :current.sync="currentTime" ref="myHello"></HelloWorld>
        <Brother2></Brother2>

        <h1>动态组件</h1>
        <div class="source">
            <div class="tab-title">
                <p @click="tabToggle('tab1')">tab1</p>
                |&nbsp;
                <p @click="tabToggle('tab2')">tab2</p>
                |&nbsp;
                <p @click="tabToggle('tab3')">tab3</p>
                |&nbsp;
            </div>
            <div class="tabs">
                <keep-alive :include="['myTab1', 'myTab2']" :exclude="'myTab2'">
                    <component :is="currentView"></component>
                </keep-alive>
            </div>
        </div>

        <template #default="scope">
            <template v-if="item.prop === 'map'">
                <div v-if="scope.row.map === 1" class="mapYes">已标注</div>
                <div v-else class="mapNo">未标注</div>
            </template>
            <el-button
                v-else
                link
                type="primary"
                size="small"
                @click="handleClick(scope.row)"
            >
                <i class="iconfont icon-Xanjing"></i> 详情</el-button
            >
        </template>
    </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue';
import Brother2 from '@/components/brother2.vue';

import tab1 from './tabs/tab1';
import tab2 from './tabs/tab2';
import tab3 from './tabs/tab3';
import * as buss from '@/utils/eventBus';
export default {
    name: 'HomeView',
    components: {
        HelloWorld,
        Brother2,
        tab1,
        tab2,
        tab3
    },
    // provide: { msg: 'this' },
    provide() {
        return { parentThis: this };
    },
    data() {
        return {
            swiperObj: {},
            currentTime: '1687137260024',
            ifshow: false,
            currentView: 'tab1'
        };
    },
    // 局部过滤器,可以写多个.所以加s的,全局就是Vue.filter
    // 局部指令directives,可以写多个.所以加s的.全局就是Vue.directive
    // 组件components
    filters: {
        formatPrice() {}
    },
    methods: {
        tabToggle(tabText) {
            this.currentView = tabText;
        },

        showInput() {
            this.num1 = 8;
            for (let i = 0; i < 100; i++) {
                this.num6 = i;
            }
            this.$refs.myHello.aletmsg();
            this.ifshow = true;
            // this.$nextTick 是一个异步的api吧.用来获取数据更新之后的dom
            // 我觉得他就是一个异步调用的过程.如果不用他的话.放到promise.then里面或者setTimeout里面都
            // 能实现.算是一个语法糖

            // 如果问到了原理.就回答原理

            // this.$nextTick(() => {
            //     // 相当于一个异步处理的过程.
            //     console.log('this.$refs.myInput', this.$refs.myInput);
            //     this.$refs.myInput.focus();
            // });
        }
    },
    beforeCreate() {},
    beforeMount() {},
    // 生命周期 请求数据...this  this绑定数据
    created() {
        console.log('===????==', buss, buss.bus1, buss.bus2);
        console.log('About的created父组件');

        // setTimeout(() => {
        //     console.log('====!!!=', this.$refs.myH2);
        // }, 0);
        // Promise.resolve().then(() => {
        //     console.log('====Promise内部then里面', this.$refs.myH2);
        // });
        // Vue.$nextTick;
        this.$nextTick(() => {
            // 相当于一个异步处理的过程.

            console.log('====PnextTick里面', this.$refs.myH2);
        });
        // 原理是什么
        // Promise.then实现的  setTimeout

        // new Promise((resolve, reject) => {
        //     console.log('====Promise内部reosolve上面=', this.$refs.myH2);

        //     reject(1111);
        //     console.log('====Promise内部reosolve下面=', this.$refs.myH2);
        //     resolve();
        // })
        //     .then(() => {
        //         console.log('====Promise内部then里面', this.$refs.myH2);
        //     })
        //     .catch(() => {
        //         console.log('====Promise内部catch里面', this.$refs.myH2);
        //     });

        this.$api.getDiyDefault().then((res) => {
            console.log(res);
            this.swiperObj = res.data.swiper;
        });
    },
    mounted() {
        console.log('我是父组件mounted');
        // 初始化插件.swiper echarts   因为这里是dom挂载之后
    },
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {
        // 清除一些定时器  事件监听程序
    },
    activated() {
        // 组件激活状态进入,并且不走别的周期
        console.log('我是homeAbout的active组件');
    },
    deactivated() {
        console.log('我是homeAbout的deactive组件');
    }
};
</script>
<style lang="less" scoped>
.tab-title {
    display: flex;
}
.home {
    width: 375px;
    background-color: red;
    height: 200px;
}
.van-button--primary {
    background-color: blue;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}
// .home /deep/ .van-swipe__indicator {
//     background-color: rgb(255, 0, 0);
// }
// 总页面宽度是750px   div 375px 占用50%   5rem

// font-size = 41.4px = 1rem       5rem = 207    414 50%
</style>
<style>
.van-swipe__indicator {
    background-color: rgb(255, 0, 0) !important;
}
</style>
